<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('finance.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('finance.crumbsTwo')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="paixu">
      <span></span>
      <p>{{$t('finance.crumbsTwo')}}</p>
    </div>

    <!-- -------------搜索查询栏------------------------ -->
    <div class="search">
      <el-row type="flex" justify="start" :gutter="10">
          <div class="search-input">
            <span>{{$t('public.orderId')}}:</span>
            <el-input size="small" style="width:130px;" v-model="formInline.orderId"></el-input>
          </div>
          <div class="search-input">
            <span>{{$t('public.userId')}}:</span>
            <el-input size="small" style="width:130px;" v-model="formInline.userId"></el-input>
          </div>
          <div class="search-input">
            <span>{{$t('finance.repaymentNo')}}:</span>
            <el-input size="small" style="width:130px;" v-model="formInline.repaymentNo"></el-input>
          </div>
        <div class="search-input">
          <span>{{$t('finance.payType')}}:</span>
          <el-select size="small" v-model="formInline.payType" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in options1" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-input">
          <span>{{$t('finance.channel')}}:</span>
          <el-select size="small" v-model="formInline.thirdChannel" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in options2" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-input">
          <span>{{$t('public.no53')}}:</span>
          <el-select size="small" v-model="formInline.isOverdue" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in options4" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-input">
          <span>{{$t('public.CreateDate')}}:</span>
          <form autocomplete="off">
            <el-date-picker size="small" v-model="searchTime1" type="daterange" range-separator="~" :default-value="$store.state.common.preMonth"
              :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
            </el-date-picker>
          </form>
        </div>
        <div class="search-input">
          <span>{{$t('public.no66')}}:</span>
          <form autocomplete="off">
            <el-date-picker size="small" v-model="searchTime2" type="daterange" range-separator="~" :default-value="$store.state.common.preMonth"
              :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
            </el-date-picker>
          </form>
        </div>
        <div class="search-input">
          <span>{{$t('public.no22')}}:</span>
          <el-select size="small" v-model="formInline.status" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in options3" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-input">
          <span>{{$t('filter.couponItem')}}:</span>
          <el-select size="small" v-model="formInline.couponType" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in options5" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-input" v-if="$store.state.common.permiss.includes('RIGHT_ACCOUNT_REPAY_QUERY')">
          <el-button type="primary"  @click="select">{{$t('public.select')}}</el-button>
        </div>
        <div class="search-input" v-if="$store.state.common.permiss.includes('RIGHT_ACCOUNT_REPAY_EXP')">
          <el-button type="primary"  @click="putExcel">{{$t('public.excel')}}</el-button>
        </div>
      </el-row>
    </div>

    <!-- -------------表单显示栏------------------------ -->
    <div class="table"  v-if="$store.state.common.permiss.includes('RIGHT_ACCOUNT_REPAY_LIST')">
      <template>
        <el-table :data="tableData" size="small" stripe v-loading="loadFlag">
          <el-table-column align="center" prop="repaymentNo" :label="$t('public.backId')">
          </el-table-column>
          <el-table-column align="center" prop="orderId" :label="$t('public.orderId')">
          </el-table-column>
          <el-table-column align="center" prop="userId" :label="$t('public.userId')">
          </el-table-column>
          <el-table-column align="center" prop="userName" :label="$t('public.name')">
          </el-table-column>
          <el-table-column align="center" prop="phone" :label="$t('public.no18')">
          </el-table-column>
          <!-- <el-table-column align="center" prop="loanAmount" :label="$t('public.no54')">
            <template slot-scope="scope">
              <span v-if="scope.row.loanAmount!==null&&scope.row.loanAmount!==undefined&&scope.row.loanAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.loanAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column> -->
          <!-- ---------借款金额 ----------->
          <el-table-column align="center" prop="loanAmount" :label="$t('public.no30')">
            <template slot-scope="scope">
              <span v-if="scope.row.loanAmount!==null&&scope.row.loanAmount!==undefined&&scope.row.loanAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.loanAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="productPeriod" :label="$t('proManage.period')">
          </el-table-column>
          <el-table-column align="center" prop="totalPeriod" :label="$t('ojk.no5')">
          </el-table-column>
          <el-table-column align="center" prop="feeAmount" :label="$t('loanMoneyDetail.feeAmount')">
            <template slot-scope="scope">
              <span v-if="scope.row.feeAmount!==null&&scope.row.feeAmount!==undefined&&scope.row.feeAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.feeAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="currentInterest" :label="$t('public.no55')">
            <template slot-scope="scope">
              <span v-if="scope.row.currentInterest!==null&&scope.row.currentInterest!==undefined&&scope.row.currentInterest!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.currentInterest)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="overdueInterestRate" :label="$t('ojk.no28')">
            <template slot-scope="scope">
              <span>{{$store.getters.twoPoint(scope.row.overdueInterestRate)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="overdueInterest" :label="$t('ojk.no26')">
            <template slot-scope="scope">
              <span v-if="scope.row.overdueInterest!==null&&scope.row.overdueInterest!==undefined&&scope.row.overdueInterest!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.overdueInterest)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
           <el-table-column align="center" prop="amountDue" :label="$t('ojk.no30')">
            <template slot-scope="scope">
              <span v-if="scope.row.amountDue!==null&&scope.row.amountDue!==undefined&&scope.row.amountDue!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.amountDue)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
           <el-table-column align="center" prop="refundAmount" :label="$t('totalManage.no1')">
            <template slot-scope="scope">
              <span v-if="scope.row.refundAmount!==null&&scope.row.refundAmount!==undefined&&scope.row.refundAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.refundAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
           <el-table-column align="center" prop="repaymentAmount" :label="$t('ojk.no42')">
            <template slot-scope="scope">
              <span v-if="scope.row.repaymentAmount!==null&&scope.row.repaymentAmount!==undefined&&scope.row.repaymentAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.repaymentAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
           <el-table-column align="center" prop="returnMoney" :label="$t('ojk.no43')">
            <template slot-scope="scope">
              <span v-if="scope.row.returnMoney!==null&&scope.row.returnMoney!==undefined&&scope.row.returnMoney!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.returnMoney)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="productPeriod" :label="$t('public.no31')">
          </el-table-column> -->
          <!-- <el-table-column align="center" prop="overdueInterestRate" :label="$t('proManage.overdueInterest')">
            <template slot-scope="scope">
              <span>{{$store.getters.twoPoint(scope.row.overdueInterestRate)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="repaymentAmount" :label="$t('public.no27')">
            <template slot-scope="scope">
              <span v-if="scope.row.repaymentAmount!==null&&scope.row.repaymentAmount!==undefined&&scope.row.repaymentAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.repaymentAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="refundAmount" :label="$t('public.no65')">
            <template slot-scope="scope">
              <span v-if="scope.row.refundAmount!==null&&scope.row.refundAmount!==undefined&&scope.row.refundAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.refundAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="couponType" :label="$t('filter.couponItem')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.couponTypeState(scope.row.couponType))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="couponDays" :label="$t('filter.couponCon')">
            <template slot-scope="scope">
              <span v-if="scope.row.couponType==1||scope.row.couponType==3||scope.row.couponType==5">{{$store.getters.moneySplit(scope.row.couponAmount)}}</span>
              <span v-else-if="scope.row.couponType==2">{{scope.row.couponDays+$t('public.no26')}}</span>
              <span v-else-if="scope.row.couponType==4">{{scope.row.couponInterest}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column> -->
          
          <el-table-column align="center" prop="payType" :label="$t('finance.payType')">
          </el-table-column>
          <el-table-column align="center" prop="bankName" :label="$t('public.no19')">
          </el-table-column>
          <el-table-column align="center" prop="paymentCode" :label="$t('finance.bluePaymentCode')">
          </el-table-column>
          <el-table-column align="center" prop="strApplyTime" :label="$t('public.CreateDate')" width="86">
          </el-table-column>
          <el-table-column align="center" prop="strLastRefundTime" :label="$t('public.backMoneyDate')" width="86">
          </el-table-column>
          <el-table-column align="center" prop="overdueDays" :label="$t('public.no43')">
            <template slot-scope="scope">
              <span>{{scope.row.overdueDays>0?$t('operationDetail.no11'):$t('operationDetail.no12')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" :label="$t('public.no22')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.backMoneyLogStatus(scope.row.status))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="thirdChannel" :label="$t('finance.channel')">
          </el-table-column>
          <el-table-column align="center" prop="remark" :label="$t('public.no37')">
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="120">
            <template slot-scope="scope">
              <span class="table_opr" @click="detail(scope.row.orderNo,scope.row.userId)">{{$t('public.detail')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" v-if="$store.state.common.permiss.includes('RIGHT_ACCOUNT_REPAY_LIST')">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="sizes, prev, pager, next, total,->"
          :page-sizes="[10, 15, 20, 30]" :page-size="pageNumber" @size-change="handleSizeChange" :total="pageTotal?pageTotal:0">
        </el-pagination>
      </div>
    </el-row>

    <!-- ------------------ 点击查看详情弹窗开始 -------------------- -->
    <!-- <el-dialog :title="$t('public.no61')" :visible.sync="backFlag" width="650px">
      <div class="left2right">
        <span class="left">{{$t('public.no61')}}:</span>
        <span class="right">{{result?result:$store.state.common.nullData}}</span>
      </div>
      <div class="left2right">
        <span class="left">{{$t('public.backMoneyDate')}}:</span>
        <span class="right">{{resultTime?resultTime:$store.state.common.nullData}}</span>
      </div>
      <div class="left2right">
        <span class="left">{{$t('public.no37')}}:</span>
        <div class="right">
          <el-input type="textarea" :rows="4" v-model="remark" :placeholder="$t('loanMoney.placeholder')"></el-input>
        </div>
      </div>
      <div class="left2right">
        <span class="left"></span>
        <div class="right">
          <el-button type="primary" @click="sureSubmit" size="small"></el-button>
        </div>
      </div>
    </el-dialog> -->

    <div class="foot"></div>


  </div>
</template>
<script>
  export default {
    name: 'backLogList',
    data() {
      return {
        flag: true,
        loadFlag: true,
        sessionid: '',
        pageTotal: 0, // 分页总数
        pageNumber: 10, // 每页条数
        searchTime1: [], // 订单创建时间数组
        searchTime2: [], // 申请成功时间数组
        // 用户查询信息数据对应字段
        formInline: {
          orderNo: "",
          orderId: "",
          userId: "",
          repaymentNo: '',
          payType: "",
          thirdChannel: "",
          paySuccessBegin: "",
          paySuccessEnd: "",
          createTimeBegin: "",
          createTimeEnd: "",
          status: "",
          couponType: ''
        },
        currentPage: 1, //当前页下标
        options1: this.$store.state.options.backMoneyType_option, // 还款方式
        options2: this.$store.state.options.thirdChannel, // 通道
        options3: this.$store.state.options.backMoneyLog_select, // 状态下拉选框信息
        options4: this.$store.state.options.isOverdue_option, // 逾期状态下拉选框信息
        options5: this.$store.state.options.couponType_option, // 优惠券类型下拉选框信息
        tableData: [], //用户信息数据模拟
        repaymentNo: '', // 还款单编号
        backFlag: false, // 确认还款弹窗开关
        remark: '', // 备注
        result: '', // 向支付通道返回的结果
        resultTime: '' // 向支付通道返回的结果时间
      }
    },
    methods: {
      handleSizeChange(val) { // 每页条数变化时操作
        this.pageNumber = val;
        this.backMoneyList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.backMoneyList();
      },
      select() {
        this.$store.commit('backMoneyLogList', this.formInline);
        if (this.flag) {
          this.currentPage = 1;
          this.flag = false;
          this.backMoneyList();
        }
      },
      socialDetali(id) {
        this.$router.push({
          path: '/userdetail?id=' + id
        });
      },
      putExcel() {
        if (this.flag) {
          this.flag = false;
          let option = {
            header: {
              ...this.$base,
              action: this.$store.state.actionMap.backMoney_logExcel,
              'page': {
                'index': this.currentPage,
                'size': this.pageNumber
              },
              'sessionid': this.sessionid
            },
            ...this.formInline
          }
          this.$axios.post('', option).then(res => {
            this.flag = true;
            if (res.data.header.code == 0) {
              let title = res.data.data.titles;
              let fields = res.data.data.fields;
              let data = res.data.data.data;
              this.$export2Excel(title, fields, data);
            }
          })
        }
      },
      backMoneyList() {
        this.loadFlag = true;
        let option = {
          header: {
            ...this.$base,
            action: this.$store.state.actionMap.backMoney_logList,
            'page': {
              'index': this.currentPage,
              'size': this.pageNumber
            },
            'sessionid': this.sessionid
          },
          ...this.formInline
        }
        this.$axios.post('', option).then(res => {
          this.flag = true;
          if (res.data.header.code == 0) {
            this.tableData = res.data.data;
            this.pageTotal = res.data.header.page.total;
          }else{
            this.$globalMsg.error(res.data.header.msg)
          }
          this.loadFlag = false;
        })
      },
      sure(repaymentNo) { // 确认还款弹窗
        if (repaymentNo) {
          this.repaymentNo = repaymentNo;
          this.backFlag = true;
          this.backMoneyResult();
        }
      },
      sureSubmit() { // 发送备注操作
        if (this.flag) {
          this.flag = false;
          if (this.remark != '') {
            let option = {
              header: {
                ...this.$base,
                action: this.$store.state.actionMap.sure_backmoney,
                'sessionid': this.sessionid
              },
              repaymentNo: this.repaymentNo,
              remark: this.remark
            }
            this.$axios.post('', option).then(res => {
              this.flag = true;
              if (res.data.header.code == 0) {
                this.$globalMsg.success(this.$t('message.success'));
                this.backMoneyList();
              } else {
                this.$globalMsg.error(res.data.header.msg);
              }
              this.backFlag = false;
            })
          } else {
            this.$globalMsg.error(this.$t('public.no42'));
            this.flag = true;
          }
        }
      },
      backMoneyResult() { // 向第三方获取还款结果
        let option = {
          header: {
            ...this.$base,
            action: this.$store.state.actionMap.backmoney_result,
            'sessionid': this.sessionid
          },
          repaymentNo: this.repaymentNo
        }
        this.$axios.post('', option).then(res => {
          if (res.data.header.code == 0) {
            this.result = res.data.data.transferStatusDesc;
            this.resultTime = res.data.data.time;
          } else {
            this.$globalMsg.error(res.data.header.msg);
          }
        })
      },
      detail(orderNo, userId) { // 跳转详情页
        this.$router.push({
          path: '/loanmoneydetail',
          query: {
            userId,
            orderNo
          }
        });
      }
    },
    watch: {
      searchTime1() {
        if (this.searchTime1) {
          this.formInline.createTimeBegin = this.$store.getters.yyyy_m_d(this.searchTime1[0]);
          this.formInline.createTimeEnd = this.$store.getters.yyyy_m_d(this.searchTime1[1]);
        } else {
          this.formInline.createTimeBegin = '';
          this.formInline.createTimeEnd = '';
        }
      },
      searchTime2() {
        if (this.searchTime2) {
          this.formInline.paySuccessBegin = this.$store.getters.yyyy_m_d(this.searchTime2[0]);
          this.formInline.paySuccessEnd = this.$store.getters.yyyy_m_d(this.searchTime2[1]);
        } else {
          this.formInline.paySuccessBegin = '';
          this.formInline.paySuccessEnd = '';
        }
      }
    },
    mounted() {
      this.sessionid = sessionStorage.getItem('sessionid');
      if (JSON.stringify(this.$store.state.common.backMoneyLogList_select) !== '{}') {
        this.formInline = this.$store.state.common.backMoneyLogList_select;
        if (this.formInline.createTimeBegin !== '') {
          this.searchTime1.push(this.formInline.createTimeBegin);
          this.searchTime1.push(this.formInline.createTimeEnd);
        }
        if (this.formInline.paySuccessBegin !== '') {
          this.searchTime2.push(this.formInline.paySuccessBegin);
          this.searchTime2.push(this.formInline.paySuccessEnd);
        }
      }
      this.backMoneyList();
    }
  }
</script>

<style scoped lang="scss">

</style>